<template>
    <el-drawer :visible.sync="show" size="1000px;">
        <div slot="title">
            <h4 style="margin-bottom: 0;font-weight: bold;">
                <el-button style="height: 0;width: 0;padding: 0;"></el-button>
                <el-tag style="margin-right: 10px;font-weight: normal;">店主信息</el-tag>
                {{list.user.nickname}}
            </h4>
        </div>
        <div class="detail_form">
            <el-card shadow="hover">
                <div slot="header">
                    <span style="font-weight: bold;">用户信息</span>
                </div>
                <el-form label-width="80px" v-loading="loading">
                    <el-form-item label="id">{{list.user.we_id}}</el-form-item>
                    <el-form-item label="微信昵称">{{list.user.nickname}}</el-form-item>
                    <el-form-item label="openid">{{list.user.openid}}</el-form-item>
                    <el-form-item label="手机号">{{list.user.phone}}</el-form-item>
                </el-form>
            </el-card>
            <el-card shadow="hover" v-if="list.remaining.length">
                <div slot="header">
                    <span style="font-weight: bold;">探店余量</span>
                </div>
                <el-table :data="list.remaining" border stripe style="width: 100%" v-loading="loading">
                    <el-table-column type="expand">
                        <template slot-scope="props">
                            <el-table-column type="expand">
                                <template slot-scope="props">
                                    <el-table :data="props.row.log" border stripe style="width: 100%" v-loading="loading">
                                        <el-table-column prop="log_id" label="日志id"></el-table-column>
                                        <el-table-column prop="action_name" label="操作"></el-table-column>
                                        <el-table-column prop="action_num" label="操作数量"></el-table-column>
                                        <el-table-column prop="rest_num" label="剩余数量"></el-table-column>
                                        <el-table-column prop="in_use_num" label="正在使用"></el-table-column>
                                        <el-table-column prop="created_at" width="150" label="操作时间"></el-table-column>
                                    </el-table>
                                </template>
                            </el-table-column>
                        </template>
                    </el-table-column>
                    <el-table-column prop="channel_name" label="达人等级"></el-table-column>
                    <el-table-column prop="remaining_times" label="剩余次数"></el-table-column>
                    <el-table-column prop="in_use_times" label="正在使用"></el-table-column>
                </el-table>
            </el-card>

            <el-card shadow="hover" v-if="list.lottery_remaining.length">
                <div slot="header">
                    <span style="font-weight: bold;">霸王餐余量</span>
                </div>
                <el-table :data="list.lottery_remaining" border stripe style="width: 100%" v-loading="loading">
                    <el-table-column type="expand">
                        <template slot-scope="props">
                            <el-table-column type="expand">
                                <template slot-scope="props">
                                    <el-table :data="props.row.log" border stripe style="width: 100%" v-loading="loading">
                                        <el-table-column prop="log_id" label="日志id"></el-table-column>
                                        <el-table-column prop="action_name" label="操作"></el-table-column>
                                        <el-table-column prop="action_num" label="操作数量"></el-table-column>
                                        <el-table-column prop="rest_num" label="剩余数量"></el-table-column>
                                        <el-table-column prop="in_use_num" label="正在使用"></el-table-column>
                                        <el-table-column prop="created_at" width="150" label="操作时间"></el-table-column>
                                    </el-table>
                                </template>
                            </el-table-column>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="达人等级"></el-table-column>
                    <el-table-column prop="remaining_times" label="剩余次数"></el-table-column>
                    <el-table-column prop="in_use_times" label="正在使用"></el-table-column>
                </el-table>
            </el-card>

            <el-card shadow="hover">
                <div slot="header">
                    <span style="font-weight: bold;">店铺信息</span>
                </div>
                <el-table :data="list.shops" border stripe style="width: 100%" v-loading="loading">
                    <el-table-column prop="shop_name" label="店铺名称">
                        <template slot-scope="scope">
                            <el-button type="text" @click="$refs.shopDetailDialog.init(scope.row)">
                                {{scope.row.shop_name}}
                            </el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="short_name" label="地区"></el-table-column>
                    <el-table-column prop="verified_name" width="100" label="状态"></el-table-column>
                    <el-table-column prop="verified_at" width="150" label="上次认证时间"></el-table-column>
                    <el-table-column prop="created_at" width="150" label="新建时间"></el-table-column>
                </el-table>
            </el-card>
            <el-card shadow="hover">
                <div slot="header">
                    <span style="font-weight: bold;">购买记录</span>
                </div>
                <el-table :data="list.orders" border stripe style="width: 100%" v-loading="loading">
                    <el-table-column prop="order_id" width="60" label="订单id"></el-table-column>
                    <el-table-column prop="trade_no" width="130" label="订单编号"></el-table-column>
                    <el-table-column prop="channel_name" label="探店等级"></el-table-column>
                    <el-table-column prop="total_fee" label="金额"></el-table-column>
                    <el-table-column prop="refund_fee" label="已退款"></el-table-column>
                    <el-table-column prop="remain_fee" label="可退款"></el-table-column>
                    <el-table-column prop="num" label="购买数量"></el-table-column>
                    <el-table-column prop="refund_num" label="已退款数量"></el-table-column>
                    <el-table-column prop="remain_num" label="可退数量"></el-table-column>
                    <el-table-column prop="success_at" width="150" label="购买时间"></el-table-column>
                </el-table>
            </el-card>
            <el-card shadow="hover">
                <div slot="header">
                    <span style="font-weight: bold;">退款记录</span>
                </div>
                <el-table :data="list.refund" border stripe style="width: 100%" v-loading="loading">
                    <el-table-column type="expand">
                        <template slot-scope="props">
                            <el-table :data="props.row.refund" border stripe style="width: 100%" v-loading="loading">
                                <el-table-column prop="refund_id" label="退款单id"></el-table-column>
                                <el-table-column prop="order_id" label="退款订单id"></el-table-column>
                                <el-table-column prop="refund_number" width="130" label="退款单号"></el-table-column>
                                <el-table-column prop="refund_fee" label="退款金额"></el-table-column>
                                <el-table-column prop="num" label="退款数量"></el-table-column>
                                <el-table-column prop="status_name" label="状态"></el-table-column>
                                <el-table-column prop="refund_at" width="145" label="退款时间"></el-table-column>
                                <el-table-column prop="created_at" width="145" label="退款申请时间"></el-table-column>
                            </el-table>
                        </template>
                    </el-table-column>
                    <el-table-column prop="apply_id" label="退款申请id"></el-table-column>
                    <el-table-column prop="finish_name" label="退款成功"></el-table-column>
                    <el-table-column prop="channel_name" label="探店等级"></el-table-column>
                    <el-table-column prop="number" label="申请总数"></el-table-column>
                    <el-table-column prop="refunded_number" label="已退款"></el-table-column>
                    <el-table-column prop="refunding_number" label="正在退款"></el-table-column>
                    <el-table-column prop="return_number" label="退款失败"></el-table-column>
                    <el-table-column prop="applied_at" width="150" label="申请时间"></el-table-column>
                </el-table>
            </el-card>
        </div>
        <shop-detail-dialog ref="shopDetailDialog" @refresh="$store.dispatch('tableReload')"></shop-detail-dialog>
    </el-drawer>
</template>

<script>
    import ShopDetailDialog from "./ShopDetailDialog";
    export default {
        name: "ShopKeeperDialog",
        components:{
            ShopDetailDialog,
        },
        data() {
            return {
                show: false,
                we_id: '',
                loading: false,
                list:{
                    user:{},
                    remaining:[],
                    shops:[],
                    orders:[],
                    refund:[],
                    lottery_remaining:[],
                },
            }
        },
        methods: {
            init(we_id) {
                this.we_id = we_id;
                this.loadData();
                this.show = true;
            },
            loadData() {
                this.loading = true;
                this.post('/api/laifei/shopkeeper/detail', {we_id: this.we_id}).then(result => {
                    if (result.code === 0) {
                        this.list = result.data;
                    } else {
                        this.$message.error(result.msg);
                    }
                    this.loading = false;
                })
            },
            refresh() {
                this.loadData();
                this.$emit('refresh');
            },
        },
    }
</script>

<style scoped>
    .detail_form {
        padding: 0 10px;
    }

    .detail_form .el-card {
        margin-bottom: 10px;
    }

    .detail_form .el-form-item {
        margin-bottom: 0;
    }

    .detail_form .el-form {
        display: flex;
        flex-wrap: wrap;
    }

    .detail_form .el-form-item {
        flex: 0 0 33%;
    }

    .detail_form .el-card__header {
        padding: 8px 20px;
    }

    .box-card {
        width: 100%;
    }
</style>
